<template>
  <div class="interaction">
    <div class="msg_list">
      <MsgList />
    </div>
    <div class="right">
      <div class="msg_win">
        <MsgWin />
      </div>
      <div class="reply">
        <el-input v-model="textarea" ref="textareaRefs" :rows="5" type="textarea" resize="none" />
      </div>
      <div class="btn"><el-button size="default" type="primary">发送</el-button></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MsgList from './c-comps/MsgList.vue';
import MsgWin from './c-comps/MsgWin.vue';
const textarea = ref('')
const textareaRefs = ref()
console.log(textareaRefs);

</script>

<style scoped lang="less">
.interaction {
  height: 100%;
  display: flex;

  .msg_list {
    flex: 0.2;
    margin-right: 15px;
    padding: 15px;
    border-radius: 20px;
    overflow-y: auto;
    background-color: white;
  }

  .right {
    flex: 0.8;
    display: flex;
    flex-direction: column;

    .msg_win {
      flex: 0.8;
      padding: 25px;
      border-radius: 20px;
      // overflow-y: auto;
      background-color: rgb(245, 245, 245);
      margin-bottom: 15px;
    }

    .reply {
      flex: 0.2;
      padding: 15px;
      background-color: white;
      border-radius: 20px;
    }

    .btn {
      // flex: 0.01;
      text-align: right;
    }
  }
}
</style>
